<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  console.log('第一种方式:')

  function SuperType(name) {
    this.name = name
    this.colors = ['red', 'blue', 'green']
  }

  SuperType.prototype.sayName = function() {
    console.log(this.name)
  }

  function SubType(name, age) {
    //继承属性
    SuperType.call(this, name)
    this.age = age
  }

  // 方式一： 这种方式实例化的对象，如果属性是引用类型，那么就会出现多个示例共享引用变量
  // SubType.prototype = SuperType.prototype
  // 方式二： 这里虽然可以这么做，但是我们需要多传递一个name参数，感觉很不好
  //SubType.prototype = new SuperType('kiwipeach')
  // 方式三： 创建一个空对象，该空对象的原型指向SuperType（推荐）
  SubType.prototype = Object.create(SuperType.prototype)
  SubType.prototype.constructor = SubType

  /**
   * 因为Object.create在es5中才添加支持，所以为了兼容，这里可以使用下面的方法进行替代补充
   */
  if (!Object.create) {
    Object.create = function(proto) {
      function F() {
      }

      F.prototype = proto
      return new F
    }
  }

  SubType.prototype.sayAge = function() {
    console.log(this.age)
  }
  var instance1 = new SubType('Nicholas', 29)
  instance1.colors.push('black')
  console.log(instance1.colors) //"red,blue,green,black"
  instance1.sayName() //"Nicholas";
  instance1.sayAge() //29
  var instance2 = new SubType('Greg', 27)
  console.log(instance2.colors) //"red,blue,green"
  instance2.sayName() //"Greg";

  instance2.sayAge() //27
</script>

</body>
</html>